<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>会员登陆</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <meta name="apple-touch-fullscreen" content="YES">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <!--<link rel="stylesheet" type="text/css" href="//cdn.bootcss.com/animate.css/3.5.2/animate.min.css">-->
    <link rel="stylesheet" type="text/css" href="/Public/projects/member/libs/animate.css">
    <link rel="stylesheet" type="text/css" href="/Public/projects/member/libs/material.css">
    <link rel="stylesheet" type="text/css" href="/Public/projects/member/style/base.css">
    <link rel="stylesheet" type="text/css" href="/Public/projects/member/style/index.css">
    <!-- <link rel="stylesheet/less" type="text/css" href="/Public/projects/member/style/index.less"> -->

    <style>
        html,body{
            height:100%;
            width:100%;
        }
        .content{
            height:100%;
            width:100%;
        }

        .header{
            width: 100%;
        }

    </style>
</head>
<body>

<div class="content">
    <img class="header" src="/Public/projects/member/assets/image/img_login_title.png">
    <div class="layout-blank40"></div>

    <div class="item-ico-text">
        <span class="item-ico sprite ico-2 v-center"></span>
        <div class="mdl-textfield mdl-js-textfield item-text">
            <input class="mdl-textfield__input " id="mobile" type="text">
            <label class="mdl-textfield__label">手机号码</label>
        </div>
    </div>

    <div class="item-ico-textx2">
        <span class="item-ico sprite ico-4 v-center"></span>
        <div class="mdl-textfield mdl-js-textfield item-text">
            <input class="mdl-textfield__input" id="verify-sms" type="text">
            <label class="mdl-textfield__label">短信验证码</label>

            <span id="get-verify-sms" class="item-text2 v-center">获取验证码</span>
        </div>
    </div>

    <div class="item-bottom" style="bottom:5%">
        <!--<div class="item-btn active">
            <div class="btn-login" id="btn-login">登陆</div>
        </div>-->

        <button disabled id="btn-login" class="item-btn mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect ">
            登 陆
        </button>

        <div class="item-text">
            <div class="wrapper">
                <span>没有账号，</span><span class="btn" id="to-register">请注册</span>
            </div>
        </div>
    </div>

</div>

<div class="dialog-mask mask none">
    <div class="dialog h-center v-center">
        <div class="header h-center"></div>
        <div class="text">
            <div class="text1" id="msg">登录失败!</div>
            <!-- <div class="text2">请重新尝试!</div> -->
        </div>
    </div>
</div>

<script src="/Public/projects/member/libs/jquery-3.1.1.js"></script>
<!-- <script src="/Public/projects/member/libs/less.js"></script> -->
<script src="/Public/projects/member/libs/material.js"></script>
<!--common of all js file-->
<script src="/Public/projects/member/js/common.js"></script>
<!--add self scrip file-->

<script>
    $(function () {
        var contextId = ns.getLocationParams()["id"];
        localStorage.setItem("contextId",contextId);

        $("input").on("focus",function () {
            $(this).next("label").addClass("focus");
        });
        $("input").on("blur",function () {
            $(this).next("label").removeClass("focus");
        });

        $("#to-register").tap(function (e) {
            var url = ns.genServerApiUrl("index?id=" + contextId);
            // ns.navigate("apply.html?id="+contextId);
            ns.navigate(url);
        });

        var
                mobileFlag = false
                ,verifySmsFlag = false
        ;
        $("#mobile").on("input",function (e) {
            mobileFlag = ns.verify("mobile",$(this).val()) ;
            checkLoginVisible();
        });
        $("#verify-sms").on("input",function (e) {
            verifySmsFlag = $(this).val().length == 4 ;
            checkLoginVisible();
        });

        function checkLoginVisible() {
            if(mobileFlag && verifySmsFlag){
                $("#btn-login").attr("disabled",false);
            }else{
                $("#btn-login").attr("disabled",true);
            }
        }

        $(".dialog-mask").tap(function (e) {
            $(".dialog-mask").addClass("none");
        });
        function showDialog(txt) {
            var dialog = $(".dialog-mask");
            dialog.removeClass("none");
            dialog.find("#msg").html(txt);
        }

        $("#btn-login").tap(function (e) {
            //会员验证
            /*
             id	    int	    是	contextId
             phone	string	是	电话号码
             code	string	是	图片验证码
             sms	string	是	短信验证码
            * */
            var
                    phone = $("#mobile").val()
                    ,sms =  $("#verify-sms").val();
            ns.ajax({
                url:"loginNext",
                data:{
                    id: contextId,
                    phone: phone,
                    sms: sms
                }
                ,success:function (result) {
                    ns.log(result);
                    if(result["status"] == 1){
                        var url = ns.genServerApiUrl("info?id=" + contextId);
                        ns.navigate(url);
                    }else{
                        showDialog(result["result"]);
                    }
                }
            });
        });

        var
                smsVisible = true
                ,counter = 60
                ;
        var $getVerifySms = $("#get-verify-sms");
        function countdown() {
            if(counter < 0){
                counter = 60;
            }
            if(smsVisible) smsVisible = false;
            $getVerifySms.html(counter + "s后重新获取");
            counter--;
            if(counter === 0) {
                $getVerifySms.html("获取验证码");
                smsVisible = true;
                return;
            }
            setTimeout(countdown ,1000);
        }
        $getVerifySms.tap(function (e) {
            if(!smsVisible) return;
            //获取验证码（60s后重新获取）
            var
                    phone = $("#mobile").val()
                    ;
            if(!mobileFlag){
                showDialog("手机号码格式不正确");
                return;
            }
            countdown();
            ns.ajax({
                url:"getSms",
                data:{
                    id: contextId,
                    phone: phone
                }
                ,success:function (result) {
                    ns.log(result);
                    //showDialog(result["result"]);
                }
            });
        })
    })
</script>

<script>
    var _hmt = _hmt || [];
    (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?80e42c68052dc7b0d359cd50f98083d3";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script>
</body>
</html>